<html>
  <head>
    <script defer src="dist/json-formatter.umd.js" charset="UTF-8"></script>
    <script defer src="demo/index.js" charset="UTF-8"></script>
    <style type="text/css">
      body {
        max-width: 800px;
        margin: 20px auto;
        font-family: sans-serif;
      }
      .gh {
        text-align: right;
      }
      .result h3 + div {
        border: 1px solid lightgray;
        border-radius: 5px;
        padding: 10px;
      }
      h1 code {
        font-size: 2em;
      }
      pre {
        font-size: 1.5rem;
        background: #efefef;
        padding: 1em;
      }
      textarea {
        font-family: monospace;
      }
    </style>
  </head>
  <body>
    <div class="intro">
      <div class="gh">
        <iframe
          src="http://ghbtns.com/github-btn.html?user=mohsen1&repo=json-formatter-js&type=watch&size=large&count=true"
          frameborder="0"
          width="170"
          height="30"
          scrolling="0"
        >
        </iframe>
        <iframe
          src="http://ghbtns.com/github-btn.html?user=mohsen1&repo=json-formatter-js&type=fork&size=large&count=true"
          frameborder="0"
          width="170"
          height="30"
          scrolling="0"
        >
        </iframe>
      </div>
      <h1><code>JSONFormatter</code></h1>
      <p>Render JSON objects in HTML with a <b>collapsible</b> navigation.</p>
      <p>
        <b
          ><a href="https://github.com/mohsen1/json-formatter-js"
            >JSON Formatter project on GitHub</a
          ></b
        >
      </p>
    </div>
    <h2>Usage</h2>
    <div class="usage">
      <p>Simple usage in ES6</p>
      <!-- HTML generated using hilite.me

import JSONFormatter from 'json-formatter-js'

const myJSON = {ans: 42};

const formatter = new JSONFormatter(myJSON);

document.body.appendChild(formatter.render());
-->

      <div
        style="
          background: #f0f3f3;
          overflow: auto;
          width: auto;
          border: solid gray;
          border-width: 0.1em 0.1em 0.1em 0.8em;
          padding: 0.2em 0.6em;
        "
      >
        <pre
          style="margin: 0; line-height: 125%"
        ><span style="color: #006699; font-weight: bold">import</span> JSONFormatter from <span style="color: #CC3300">&#39;json-formatter-js&#39;</span>

<span style="color: #006699; font-weight: bold">const</span> myJSON <span style="color: #555555">=</span> {ans<span style="color: #555555">:</span> <span style="color: #FF6600">42</span>};

<span style="color: #006699; font-weight: bold">const</span> formatter <span style="color: #555555">=</span> <span style="color: #006699; font-weight: bold">new</span> JSONFormatter(myJSON);

<span style="color: #336666">document</span>.body.appendChild(formatter.render());
  </pre>
      </div>
    </div>
    <h2>Playground</h2>
    <div class="playground">
      <p>
        Updating the JSON value in this textarea renders a new formatter on the
        right.
      </p>
      <table>
        <tr>
          <td>
            <textarea id="live" name="" id="" cols="30" rows="10">
{"foo": 42}</textarea
            >
          </td>
          <td>
            <div id="live-result"></div>
          </td>
        </tr>
        <tr>
          <p>
            <input type="checkbox" id="hoverPreviewEnabled" />
            <label for="hoverPreviewEnabled"
              ><code>hoverPreviewEnabled</code></label
            >
          </p>
        </tr>
      </table>
    </div>
    <h2>Examples</h2>
    <div class="result"></div>
  </body>
</html>
